<template>
    <!-- 文本配置 -->
    <div class="prop-text">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="id">{{ data.id }} <i class="el-icon-refresh" @click.stop="refresh()"></i></el-form-item>
            <el-form-item label="可编辑">
                <el-switch v-model="data.options.edit" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                <el-tooltip effect="dark" content="设计模式:true设计者可进行内容编辑,false设计者可以操作元素移动、复制、删除。渲染模式:true/false用户可进行编辑" placement="top">
                    <i class="question el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="提取数据" v-if="data.options.edit && previewOption.mode == 'edit'">
                <el-input class="input-tooltip" v-model.trim="data.options.dataReturnField" placeholder="注意！数据绑定提取字段"></el-input>
                <el-tooltip effect="dark" content="填写字段：保存时报表会自动提取录入数据，返回对应的key值。" placement="top">
                    <i class="question el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <!-- <el-form-item label="数据模式" v-if="data.options.edit && previewOption.mode == 'edit'">
                <el-radio-group v-model="data.options.editSelect">
                    <el-radio-button label="input">正常</el-radio-button>
                    <el-radio-button label="select">Select</el-radio-button>
                    <el-radio-button label="selectTree">SelectTree</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="数据接口" v-if="data.options.edit && previewOption.mode == 'edit'">
                <el-select v-model="data.options.editSelectApi"
                    size="mini"
                    :disabled="data.options.editSelect == 'input'"
                    placeholder='选择API配置的数据地址'
                    clearable
                    @change="handleApi">
                    <el-option v-for="(item, index) in Api.options" :key="index" :label="item.api" :value="item.api"></el-option>
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="lable/value" v-if="data.options.edit && previewOption.mode == 'edit'">
                <el-input v-model.trim="data.options.editSelectLabel" :disabled="data.options.editSelect == 'input' || !data.options.editSelectApi" placeholder="数据接口的Label"></el-input>
                <el-input v-model.trim="data.options.editSelectValue" :disabled="data.options.editSelect == 'input' || !data.options.editSelectApi" placeholder="数据接口的Value"></el-input>
            </el-form-item> -->
            <el-form-item label="文字间距">
                <el-input-number v-model="data.options.letterSpacing" :controls="false"></el-input-number>
                <span class="unit">(px)</span>
            </el-form-item>
            <el-form-item label="外边距" class="margin">
                <div class="item">
                    <span>top：</span>
                    <el-input-number v-model="data.options.margin.top" placeholder="上边距" :controls="false"></el-input-number>
                    <span class="unit">(px)</span>
                </div>
                <div class="item">
                    <span>bottom：</span>
                    <el-input-number v-model="data.options.margin.bottom" placeholder="下边距" :controls="false"></el-input-number>
                </div>
                <div class="item">
                    <span>left：</span>
                    <el-input-number v-model="data.options.margin.left" placeholder="左边距" :controls="false"></el-input-number>
                </div>
                <div class="item">
                    <span>right：</span>
                    <el-input-number v-model="data.options.margin.right" placeholder="右边距" :controls="false"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="内边距" class="margin">
                <div class="item">
                    <span>top：</span>
                    <el-input-number v-model="data.options.padding.top" placeholder="上边距" :controls="false"></el-input-number>
                    <span class="unit">(px)</span>
                </div>
                <div class="item">
                    <span>bottom：</span>
                    <el-input-number v-model="data.options.padding.bottom" placeholder="下边距" :controls="false"></el-input-number>
                </div>
                <div class="item">
                    <span>left：</span>
                    <el-input-number v-model="data.options.padding.left" placeholder="左边距" :controls="false"></el-input-number>
                </div>
                <div class="item">
                    <span>right：</span>
                    <el-input-number v-model="data.options.padding.right" placeholder="右边距" :controls="false"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="缩放比例" class="margin">
                <div class="item">
                    <span>X：</span>
                    <el-input-number v-model="data.options.scale.x" placeholder="x" :controls="false"></el-input-number>
                    <span class="unit">(px)</span>
                </div>
                <div class="item">
                    <span>Y：</span>
                    <el-input-number v-model="data.options.scale.y" placeholder="y" :controls="false"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="textAlign">
                <el-switch v-model="data.options.textAlign" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="textAlignLast">
                <el-switch v-model="data.options.textAlignLast" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="文字超出">
                <el-switch v-model="data.options.overflow" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="展示行数" v-if="data.options.overflow">
                <el-input-number v-model="data.options.lineClamp" :controls="false" :min="1" :max="3"></el-input-number>
            </el-form-item>
            <el-form-item label="锚点绑定">
                <el-switch v-model="data.options.anchor" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                <el-input v-if="data.options.anchor" v-model.trim="data.options.anchorField" placeholder="锚点绑定：0:[fieid]"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getUUID } from "@/utils/index";
export default {
    name: "PropText",
    props: {
        data: {
            type: Object
        },
        Api: {
            type: Object
        },
        previewOption: {
            type: Object
        }
    },
    methods: {
        refresh() { // 重制ID
            this.data.id = getUUID();
        },
        handleApi() {
        }
    }
}
</script>
